<template>
  <div style="padding-left: 100px;padding-top: 30px">
    <h3>订单支付</h3>

    <div class="item-div">
        <div class="item-div-img">
          <el-image
              style="width: 200px; height:148px"
              :src="baseUrl+order.headImg"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :initial-index="4"
              fit="cover"
          />
        </div>
        <div class="item-div-title">
          <h5 style="color: #cccccc">订单号: {{order.orderId}}</h5>
          <h2 style="margin-top: 10px">{{order.modelNum}}</h2>
          <h5 style="color: #cccccc;margin-top: 15px">车牌号: {{order.carNum}}</h5>
          <h5 style="color: #cccccc;margin-top: 10px">联系方式: {{order.phone}}</h5>

        </div>
        <div class="item-div-title">
           <h5 style="color: #cccccc">车身颜色: {{order.carColor}}</h5>
           <h5 style="color: #cccccc;margin-top: 15px">租赁方式:
             <span v-if="order.leaseMethod == 0">日租</span>
             <span  v-if="order.leaseMethod == 1">月租</span>
           </h5>
          <h5 style="color: #cccccc;margin-top: 15px">租赁总时长:
            <span v-if="order.leaseMethod == 0">{{order.monthNums}}日</span>
            <span  v-if="order.leaseMethod == 1">{{order.monthNums}}月</span>
          </h5>
        </div>
       <div class="item-div-title">
              <h4 style="color:firebrick">租金: {{order.rent}}元</h4>
              <h4 style="color:firebrick;margin-top: 30px">押金: {{order.deposit}}元</h4>
       </div>
    </div>
    <div style="color:firebrick;font-weight: bold;margin-top: 10px;margin-left: 1000px ">
        <span>合计: {{order.totalMoney}}元</span>
    </div>

    <div style="margin-top: 50px;margin-left: 1000px">
      <el-popconfirm title="确定支付订单？" @confirm="getOrderPay(order.id)">
        <template #reference>
          <el-button type="danger" >立即支付</el-button>
        </template>
      </el-popconfirm>
      <el-button @click="()=>{router.push('/me')}">返回</el-button>
    </div>
  </div>

</template>
<script setup>
import axios from "@/axios.js"
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router"
import {ElMessage} from "element-plus";
import {router} from "@/router/index.js"

const route = useRoute()
const baseUrl = '../../public/img/'

const order = ref({})

const id = ref(0)
onMounted(()=>{
    id.value = route.params.type
    getOrderById(id.value)
})
const getOrderById = (id)=>{
  axios.get(`/order/info/${id}`).then(res=>{
      order.value = res.data
  })
}

const getOrderPay = (id)=>{
   axios.post(`/order/pay/${id}`).then(res=>{
     ElMessage({
       showClose: true,
       message: '恭喜你，支付成功',
       type: 'success',
       onClose: () => {
         router.push("/me")
       }
     });
   })
}

</script>
<style scoped>

.item-div{
  margin-top: 20px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  height: 150px;
  width: 1150px;
}
.item-div-img{
  float: left;
  width: 200px;
  height: 148px;
}
.item-div-title{
  margin-left: 15px;
  padding-top: 10px;
  float: left;
  width: 250px;
  height: 148px;

}

</style>